<template>
  <div class="product">
    <header>
      <!-- 搜索框 -->
      <div class="sou" @click="show = true">
        <van-search class="search" show-action shape="round" v-model="value" placeholder="请输入商品名称">
          <template #action>
            <div @click.stop="onSearch(value)" class="txt">搜索</div>
          </template>
        </van-search>
      </div>
      <van-overlay :show="show" @click="show = false" z-index="9999" />
      <!-- 侧边导航 -->
      <van-sidebar v-model="activeKey">
        <van-sidebar-item v-for="item in list" :title="item.CategoryName" />
      </van-sidebar>

      <!-- 右侧内容 -->
      <van-row>
        <van-col v-for="item in itemdata" span="8" @click="goto(item.CategoryId)">
          <img :src="item.PictureUrl" alt />
          {{item.CategoryName}}
        </van-col>
      </van-row>
    </header>
    <!-- 底部导航 -->
    <Nev />
  </div>
</template>
<script>
import Nev from "@/components/Nev.vue";
import getapi from "@/api/ajax";
export default {
  data() {
    return {
      show: false, //遮罩
      activeKey: 0, //下标
      value: "", //搜索框内容
      list: "", //列表
      itemdata: [] //详细分类
    };
  },
  methods: {
    onSearch(value) {
      //搜索按钮
      this.$router.push({ path: "/product/productList", query: { value } });
    },
    goto(url) {
      //路由跳转
      this.$router.push({ path: "/product/productList", query: { url } });
    },
    //ajax请求
    async getdata() {
      try {
        let body = {};
        let n = await getapi.getdata(
          "commodityapi/Commodity/GetAllCategory",
          body
        );
        this.list = n.data.Data.CategoryList;
        this.itemdata = this.list[this.activeKey].Childs;
      } catch (err) {
        console.log(err);
      }
    }
  },
  created() {
    this.getdata();
  },
  watch: {
    activeKey: function() {
      //下标变化的时候修改详情数据
      this.itemdata = this.list[this.activeKey].Childs;
    }
  },
  components: {
    Nev
  }
};
</script>
<style lang="scss">
.product {
  //大盒子
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  .sou {
    height: 2.5625rem;
  }
  .van-row {
    //右边内容
    background: #fff;
    // margin-top: 2.546875rem;
    margin-left: 5.226875rem;
    overflow: auto;
    padding-bottom: 4.17rem;
    .van-col {
      font-size: 0.75rem;
      height: 6rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        height: 3.56625rem;
        width: 3.56625rem;
      }
    }
  }
  .search {
    //搜索框
    z-index: 10000;
    height: 2.546875rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    .van-cell {
      height: 1.698125rem;
    }
    .txt {
      color: #11b57c;
    }
  }
  .van-sidebar {
    //侧边导航栏
    position: fixed;
    left: 0;
    top: 2.546875rem;
    float: left;
    width: 5.226875rem;
    height: 100%;
    overflow: hidden;
    z-index: 98;
    background: #f4f4f4;

    .van-sidebar-item--select::before {
      //侧边导航栏左边框
      border-left: 0.1rem solid #11b57c;
      background-color: #11b57c;
      color: #11b57c;
      height: 100%;
      width: 1px;
    }
    .van-sidebar-item {
      //
      width: 5.226875rem;
      height: 3.208125rem;
      font-size: 0.75rem;
      text-align: center;
      line-height: 100%;
      background: #f4f4f4;
    }
    .van-sidebar-item--select {
      //选中标签
      color: #11b57c;
      background: #fff;
    }
  }
}
</style>